<template>
  <view class="facility-editor">
    <!-- 已选设施 -->
    <view v-if="selectedFacilities.length > 0" class="selected-facilities">
      <view class="facility-tags">
        <uni-tag 
          v-for="(facility, index) in selectedFacilities" 
          :key="index"
          :text="facility"
          type="primary"
          size="small"
          :closable="!disabled"
          @close="removeFacility(index)"
        />
      </view>
    </view>

    <!-- 添加设施 -->
    <view v-if="!disabled" class="add-facility">
      <view class="input-row">
        <uni-easyinput 
          v-model="newFacility" 
          placeholder="输入设施名称"
          @confirm="addFacility"
        />
        <button class="add-btn" @click="addFacility">添加</button>
      </view>
    </view>

    <!-- 常用设施快选 -->
    <view v-if="!disabled" class="common-facilities">
      <text class="section-title">常用设施</text>
      <view class="facility-grid">
        <view 
          v-for="facility in commonFacilities" 
          :key="facility"
          class="facility-item"
          :class="{ selected: selectedFacilities.includes(facility) }"
          @click="toggleFacility(facility)"
        >
          <text class="facility-name">{{ facility }}</text>
        </view>
      </view>
    </view>

    <!-- 只读模式显示 -->
    <view v-if="disabled && selectedFacilities.length === 0" class="empty-state">
      <text class="empty-text">暂无设施信息</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

interface Props {
  modelValue?: string[];
  disabled?: boolean;
}

interface Emits {
  (e: 'update:modelValue', value: string[]): void;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => [],
  disabled: false,
});

const emit = defineEmits<Emits>();

const selectedFacilities = ref<string[]>([]);
const newFacility = ref('');

const commonFacilities = [
  'WiFi',
  '空调',
  '投影仪',
  '音响设备',
  '白板',
  '饮水机',
  '停车位',
  '电梯',
  '洗手间',
  '茶水间',
  '打印机',
  '会议桌',
  '椅子',
  '插座',
  '照明设备',
];

const addFacility = () => {
  const facility = newFacility.value.trim();
  if (facility && !selectedFacilities.value.includes(facility)) {
    selectedFacilities.value.push(facility);
    newFacility.value = '';
    updateValue();
  }
};

const removeFacility = (index: number) => {
  selectedFacilities.value.splice(index, 1);
  updateValue();
};

const toggleFacility = (facility: string) => {
  const index = selectedFacilities.value.indexOf(facility);
  if (index > -1) {
    selectedFacilities.value.splice(index, 1);
  } else {
    selectedFacilities.value.push(facility);
  }
  updateValue();
};

const updateValue = () => {
  emit('update:modelValue', [...selectedFacilities.value]);
};

watch(() => props.modelValue, (newVal) => {
  if (Array.isArray(newVal)) {
    selectedFacilities.value = [...newVal];
  }
}, { immediate: true, deep: true });
</script>

<style lang="scss" scoped>
.facility-editor {
  .selected-facilities {
    margin-bottom: 16px;
  }

  .facility-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .add-facility {
    margin-bottom: 16px;
  }

  .input-row {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .add-btn {
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
  }

  .common-facilities {
    .section-title {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-color);
      margin-bottom: 12px;
    }
  }

  .facility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .facility-item {
    padding: 8px 12px;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: center;
    border: 1px solid transparent;
    
    &.selected {
      background-color: var(--primary-color);
      color: #fff;
    }
  }

  .facility-name {
    font-size: 13px;
  }

  .empty-state {
    padding: 20px;
    text-align: center;
  }

  .empty-text {
    color: var(--text-color-secondary);
    font-size: 14px;
  }
}
</style>